<template>
  <el-dialog
    v-if="dialogVisible"
    :title="`${queryData.id ? '编辑' : '新增'}用户`"
    :visible.sync="dialogVisible"
    @close="close"
  >
    <el-form
      ref="form"
      :model="queryData"
      :rules="formRules"
      label-width="140px"
    >
      <el-form-item label="企业名称" prop="shortName">
        <el-input v-model="queryData.shortName" />
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-input v-model="queryData.company" />
      </el-form-item>
      <el-row class="lianjie">
        <a href="https://www.tianyancha.com" target="_black">
          https://www.tianyancha.com</a>(在此可查询所属公司全称及简介)
      </el-row>
      <el-form-item label="城市地区">
        <el-select v-model="queryData.province" placeholder="请选择">
          <el-option
            v-for="(item, index) in city"
            :key="index"
            :value="item"
            :label="item"
          />
        </el-select>
        <el-select v-model="queryData.city" placeholder="请选择">
          <el-option
            v-for="(item, index) in area"
            :key="index"
            :value="item"
            :label="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="方向(企业标签)" prop="tags">
        <el-input v-model="queryData.tags" />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="queryData.remarks" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="btnOk">立即创建</el-button>
    </div>
  </el-dialog>
</template>

<script>
import chooseCity from '@/mixins/chooseCity'
import { addCompany, getCompany, editCompany } from '@/api/company'
export default {
  mixins: [chooseCity],
  data() {
    return {
      dialogVisible: false,
      queryData: {},
      formRules: {
        shortName: [{ required: true, trigger: 'blur', message: '不能为空' }],
        company: [{ required: true, trigger: 'blur', message: '不能为空' }],
        tags: [{ required: true, trigger: 'blur', message: '不能为空' }],
        remarks: [{ required: true, trigger: 'blur', message: '不能为空' }]
      }
    }
  },
  methods: {
    close() {
      this.$refs.form.clearValidate()
      this.queryData = {}
    },
    async btnOk() {
      if (this.queryData.id) {
        await editCompany({ ...this.queryData, isFamous: false })
      } else {
        await addCompany({ ...this.queryData, isFamous: true })
      }
      this.$message.success('操作成功')
      this.$emit('update')
      this.dialogVisible = false
    },
    async getCompany(id) {
      const res = await getCompany(id)
      this.queryData = res
    }
  }
}
</script>

<style lang="scss" scope>
.lianjie {
  display: block;
  padding: 10px 0 20px 140px;
  a {
    display: inline-block;
    height: 30px;
    border-bottom: 1px solid transparent;
    &:hover {
      color: #51a7ff;
      border-bottom-color: #51a7ff;
    }
  }
}
</style>
